<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单管理</title>
<link rel="stylesheet" href="${basePath}/admin/layui/css/layui.css">
<link rel="stylesheet" href="${basePath}/admin/css/admin.css">
<script type="text/javascript">
		window.token = '${sessionScope.token}';
</script>
</head>
<body>
<div class="layui-container">
	<div class="layui-form">
		<div class="layui-form-item">
      		<label class="layui-form-label"><span style="color:red;">*</span>菜单类型：</label>
      		<div class="layui-input-inline" style="width:280px;margin-top:20px;">
      			<input type="hidden" id="menuTypeHidden" value="1"/>
		        <select id="menuTypeSelect" name="menuType" lay-filter="menuTypeSelect">
		          <option value="1">左侧菜单</option>
		          <!-- <option value="2">顶部菜单</option> -->
		        </select>
	        </div>
        </div>
        <div class="layui-form-item">
      		<label class="layui-form-label"><span style="color:red;">*</span>菜单名称：</label>
	        <div class="layui-input-inline" style="width:280px;margin-top:20px;">
	        	<input type="text" id="menuName" name="menuName" lay-verify="menuName" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
	        </div>
        </div>
        <div class="layui-form-item">
      		<label class="layui-form-label"><span style="color:red;">*</span>菜单地址：</label>
	        <div class="layui-input-inline" style="width:280px;margin-top:20px;">
	        	<input type="text" id="menuUrl" name="menuUrl" lay-verify="menuUrl" placeholder="请输入菜单地址" autocomplete="off" class="layui-input">
	        </div>
        </div>
        <div class="layui-form-item">
      		<label class="layui-form-label">菜单图标：</label>
	        <div class="layui-input-inline" style="width:280px;margin-top:20px;">
	        	<input type="text" id="menuUrl" name="menuIcon" placeholder="请输入菜单图标名称" autocomplete="off" class="layui-input">
	        </div>
        </div>
        <div class="layui-form-item">
      		<label class="layui-form-label">上级菜单：</label>
      		<div class="layui-input-inline" style="width:280px;margin-top:20px;">
      			<input type="hidden" id="parentIdHidden" value="0"/>
		        <select id="parentMenuSelect" name="parentId" lay-filter="parentMenuSelect" lay-search="">
		          
		        </select>
	        </div>
        </div>
        <div class="layui-form-item">
      		<label class="layui-form-label"><span style="color:red;">*</span>排序：</label>
	        <div class="layui-input-inline" style="width:280px;margin-top:20px;">
	        	<input type="text" id="menuSort" name="menuSort" lay-verify="menuSort" placeholder="请输入菜单排序" autocomplete="off" class="layui-input">
	        </div>
        </div>
        <div class="layui-form-item">
      		<label class="layui-form-label"><span style="color:red;">*</span>是否启用：</label>
	        <div class="layui-input-inline">
		        <input value="0" type="checkbox" lay-filter="switch" id="disabled" name="disabled" lay-skin="switch" lay-text="启用|不启用"><div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>启用</em><i></i></div>
		    </div>
        </div>
		<button style="display:none;" id="submitBtn" class="layui-btn layuiadmin-btn-list" lay-submit=""
			lay-filter="submit">
			<i class="layui-icon layui-icon-search"></i>
		</button>
	</div>
</div>
</body>
<script src="${basePath}/admin/layui/layui.all.js"></script>
<script src="${basePath}/admin/js/plugin/jquery-2.2.4.min.js"></script>
<script src="${basePath}/admin/js/plugin/template-web.js"></script>
<script src="${basePath}/admin/js/mylayui.js"></script>
<script type="text/javascript">
	var basePath = '${basePath}';
	var form = layui.form;
	//父级菜单下拉框选择事件
	form.on('select(parentMenuSelect)', function(data){
	  $("#parentIdHidden").val(data.value);
	}); 
	//菜单类型下拉框选择事件
	form.on('select(menuTypeSelect)', function(data){
	  $("#menuTypeHidden").val(data.value);
	  $("#parentMenuSelect").html("");
	  $.ajax({
			url: basePath+ "/sys/getParentMenuByType",
			type: "POST",
			headers: {"token" : window.token},
			dataType: 'json',
			data:{menuType:data.value},
			success: function(data) {
				var objArr = data.data;
				$("#parentMenuSelect").append("<option value='0'>直接选择或搜索选择</option>");
				for(var i=0;i<objArr.length;i++){
					var obj = objArr[i];
					var option = "<option value='"+obj.menuId+"'>"+obj.menuName+"</option>";
					$("#parentMenuSelect").append(option);
				}
				form.render('select');
			},
			error:function(){
				layer.alert("操作失败");
			}
		});
	})
	//提交表单
	form.on('submit(submit)', function(data){
		var menuName = $.trim($("#menuName").val());
		var menuUrl = $.trim($("#menuUrl").val());
		var parentId = $.trim($("#parentIdHidden").val());
		var menuSort = $.trim($("#menuSort").val());
		var disabled = $.trim($("#disabled").val());
		var menuType = $("#menuTypeHidden").val();
		$.ajax({
			url: basePath+ "/sys/addOrUpdateMenu",
			type: "POST",
			headers: {"token" : window.token},
			dataType: 'json',
			data:{menuName:menuName,menuUrl:menuUrl,parentId:parentId,menuSort:menuSort,disabled:disabled,menuType:menuType},
			success: function(data) {
				if(data.success == true){
					layer.alert(data.message,function(index){
						var parentBtn = parent.document.getElementById("submitBtn");
						$(parentBtn).trigger("click");
						parent.layer.closeAll();
					});   
				}else{
					layer.alert(data.message);
				}
			},
			error:function(){
				layer.alert("操作失败");
			}
		});
    });
	//切换是否启用事件
	form.on('switch(switch)', function(data){
		if(data.elem.checked == false){
			$("#disabled").val(0);
		}else{
			$("#disabled").val(1);
		}
	    //console.log(data.elem); //得到checkbox原始DOM对象
	    //console.log(data.elem.checked); //开关是否开启，true或者false
	    //console.log(data.value); //开关value值，也可以通过data.elem.value得到
	    //console.log(data.othis); //得到美化后的DOM对象
	});  
	form.verify({
	  menuName: function(value, item){ //value：表单的值、item：表单的DOM对象
	    if(value.trim() == ''){
	      return '请输入菜单名称';
	    }
	  },
	  menuUrl: function(value, item){ //value：表单的值、item：表单的DOM对象
	    if(value.trim() == ''){
	      return '请输入菜单地址';
	    }
	  },
	  menuSort: function(value, item){ //value：表单的值、item：表单的DOM对象
		var reg = /^[1-9]\d*$/;
	    if(value.trim() == ''){
	      return '请输入排序';
	    }
	    if(!reg.test(value.trim())){
	      return '请输入正确的排序';
	    }
	  }
	});
	//初始化父级菜单下拉框
	$.ajax({
		url:basePath+ "/sys/getParentMenuByType",
		type: "POST",
		headers: {"token" : window.token},
		dataType: 'json',
		success: function(data) {
			var objArr = data.data;
			$("#parentMenuSelect").append("<option value='0'>直接选择或搜索选择</option>");
			for(var i=0;i<objArr.length;i++){
				var obj = objArr[i];
				var option = "<option value='"+obj.menuId+"'>"+obj.menuName+"</option>";
				$("#parentMenuSelect").append(option);
			}
			form.render('select');
		},
		error:function(){
			layer.alert("操作失败");
		}
	});
</script>

</html>